<template>
	<view>
		<view class="page_title">
		  <nav-back></nav-back>
		  <view class="page_name">私人订制</view>
		  <view class="blank"></view>
		</view>
		
		<view class="banxin">
		  <view class="title">
		    私人订制专属脱单方案
		    <view class="info">
		      安全｜专业｜高效｜温暖
		    </view>
		  </view>
		  <view class="service_list">
		    <view class="service">
		      <image src="/static/img/service1.png" mode=""/>
		      <view class="content">
		        <text class="service_title">会员一对一深度沟通</text> 
		        <text>资深婚恋顾问一对一沟通，精准匹配，择偶建议</text> 
		      </view>
		    </view>
		    <view class="service">
		      <image src="/static/img/service2.png" mode=""/>
		      <view class="content">
		        <text class="service_title">全过程情感咨询及恋爱指导</text> 
		        <text>资深顾问在过程中一对一情感剖析及如何自我提升</text> 
		      </view>
		    </view>
		    <view class="service">
		      <image src="/static/img/service3.png" mode=""/>
		      <view class="content">
		        <text class="service_title">安排一对一约见</text> 
		        <text>资深婚恋顾问合理安排一对一约见方案</text> 
		      </view>
		    </view>
		    <view class="service">
		      <image src="/static/img/service4.png" mode=""/>
		      <view class="content">
		        <text class="service_title">约见结果反馈</text> 
		        <text>资约见后，第一时间与双方沟通，更高效了解双方印象</text> 
		      </view>
		    </view>
		  </view>
		  <button class="next" type="primary" @click="handleCustomize">申请私人定制会员</button>
		</view>
		
		<u-popup closeable :show="showPopup" mode='center' @close="handleClose">
		  <view class="matcher">
		    <image src="/static/img/matcher.png" mode=""/>
		  </view>
		  <view class="title">
		    长按二维码添加红娘微信
		  </view>
		
		  <view class="code">
		    <image :show-menu-by-longpress="true" src="/static/img/wx_code.png" mode=""/>
		  </view>
		</u-popup>
	</view>
</template>

<script>
	import request from '@/utils/request.js'
	import NavBack from '@/components/NavBack.vue'

	export default {
		components: {
			NavBack
		},
		data() {
			return {
				showPopup:false
			}
		},
		methods: {
			handleCustomize(){
			    this.showPopup = true
			  },
			  handleClose(){
			    this.showPopup = false
			  },
		}
	}
</script>

<style lang="scss">
/* pages/customize/customize.wxss */
@import "@/style/mstcher.scss";

.title{
  font-weight: 500;
  line-height: 46rpx;
  margin-top: 50rpx;
  color: rgba(51, 51, 51, 1);
  .info{
    font-size: 24rpx;
    line-height: 40rpx;
    margin-top: 10rpx;
  }
}
.service_list{
  margin-top: 40rpx;
  .service{
    display: flex;
    margin-top: 30rpx;
    align-items: center;
    padding:30rpx 50rpx;
    border-radius: 60rpx;
    background-color: rgba(235, 235, 255, 1);
    image{
      width: 76rpx;
      height: 76rpx;
      margin-right: 40rpx;
    }
    .content{
      height: 76rpx;
      color: rgba(102, 102, 102, 1);
      line-height: 28rpx;
	  text{
		  font-size: 20rpx;
	  }
      .service_title{
        display: block;
        font-size: 28rpx;
        font-weight: 500;
        line-height: 40rpx;
        margin-bottom: 10rpx;
      }
    }
  }

}
</style>
